<style scoped>
.modibutton {
  background-color: #2b85e4;
  color: white;
  border-color: #2b85e4;
}
</style>

<template>
  <div>
    <Button
      style="float: left; margin-right: 8px"
      icon="ios-add"
      type="primary"
      shape="circle"
      @click="initmodal1(mjori)"
    >添加专业方向</Button>
    <br />
    <br />
    <br />
    <Modal v-model="modal1" title="录入专业方向信息" width="380" scrollable @on-ok="addOri(mjori)">
      <div>
        <Form :model="mjori" :label-width="90" label-position="left">
          <FormItem label="方向编码：">
            <Input v-model="mjori.oriId" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="方向名称：">
            <Input v-model="mjori.oriName" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="总学分：">
            <Input v-model="mjori.mjTotalcredit" type="text" style="width:90%" />
          </FormItem>
        </Form>
      </div>
    </Modal>

    <Table border :columns="columnshead" :data="datat">
      <!-- 修改项 -->
      <!-- oriId -->
      <template slot-scope="{ row, index }" slot="oriId">
        <Input type="text" v-model="modiori.oriId" v-if="editIndex === index" />
        <span v-else>{{ row.oriId }}</span>
      </template>
      <!-- oriName -->
      <template slot-scope="{ row, index }" slot="oriName">
        <Input type="text" v-model="modiori.oriName" v-if="editIndex === index" />
        <span v-else>{{ row.oriName }}</span>
      </template>
      <!-- mjTotalcredit -->
      <template slot-scope="{ row, index }" slot="mjTotalcredit">
        <Input type="text" v-model="modiori.mjTotalcredit" v-if="editIndex === index" />
        <span v-else>{{ row.mjTotalcredit }}</span>
      </template>
      <!-- 修改按钮 -->
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSave(row,index)" size="small" class="modibutton">保存</Button>
          <Button @click="editIndex = -1" size="small" class="modibutton">取消</Button>
        </div>
        <div v-else>
          <Button @click="modiOri(row, index)" size="small" class="modibutton">修改专业方向信息</Button>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  props: ["majorId", "mvId"],
  data() {
    return {
      columnshead: [
        {
          type: "index",
          title: "序号",
          width: 60
        },
        {
          title: "专业编码",
          key: "mjId"
        },
        {
          title: "方向编码",
          slot: "oriId"
        },
        {
          title: "方向名称",
          slot: "oriName"
        },
        {
          title: "计划版本",
          key: "mvId"
        },
        {
          title: "总学分",
          slot: "mjTotalcredit"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      datat: [],
      modal1: false,
      editIndex: -1,
      mjori: {},
      modiori: {}
    };
  },

  created() {
    this.$axios
      .get(
        this.$host +
          "/MajorOrientation/majorOrientationByMajor?mjId=" +
          this.majorId
      )
      .then(res => {
        this.datat = res.data.data;
      });
  },

  methods: {
    initmodal1(mjori) {
      this.modal1 = true;
      for (var key in mjori) {
        this.$delete(mjori, key);
      }
    },
    addOri(mjori) {
      mjori.mrId = Math.ceil(Math.random() * 10);
      mjori.mvId = this.mvId;
      mjori.mjId = this.majorId;
      this.$axios
        .post(this.$host + "/MajorOrientation/majorOrientation", mjori)
        .then(res => {
          if ((res.data.message = "添加成功")) {
            this.$Message.success("添加专业方向成功");
            if (this.datat.length == 10) {
              this.datat.pop();
            }
            var obj = JSON.parse(JSON.stringify(mjori)); //解决相同对象覆盖问题，深度拷贝解决初始化清空
            this.datat.unshift(obj);
            this.total++;
          } else this.$Message.error("添加专业方向失败");
        });
    },
    modiOri(row, index) {
      this.modiori = row;
      this.editIndex = index;
    },
    handleSave(row, index) {
      row = this.modiori;
      this.modiori = JSON.parse(JSON.stringify(row));
      this.$delete(this.modiori, "_index");
      this.$delete(this.modiori, "_rowKey");
      this.$axios
        .put(this.$host + "/MajorOrientation/majorOrientation", this.modiori)
        .then(res => {
          if (res.data.message == "修改成功")
            this.$Message.success("修改专业方向成功");
          else this.$Message.error("修改专业方向失败");
        });
      this.editIndex = -1;
    }
  }
};
</script>
